<template>
  <el-dialog v-model=parentDialogFormVisible :title="fn+'地址'" @close="closeDialog" width="30%">
    <el-form ref="addressFormRef" :model="addressForm" label-width="80px">
      <el-form-item label="手机号码" prop="selectedOptions">
        <el-input
            v-model.number="addressForm.phoneNum"
            placeholder="请输入您的收货号码"
            clearable
            maxlength="11"
        />
      </el-form-item>
      <el-form-item label="所在地区" prop="selectedOptions">
        <el-cascader
            :options="locOptions"
            style="width: 400px"
            placeholder="请选择您的所在地"
            v-model="selectedOptions"
            @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="addressDetail">
        <el-input v-model="addressForm.addressDetail" type="textarea" placeholder="请填写您的详细地址或门牌号"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="addressForm.id == null || addressForm.id === ''" type="success" @click="addAddress">新增</el-button>
      <el-button v-else type="primary" @click="editAddress">修改</el-button>
    </template>
  </el-dialog>
</template>

<script>
const {regionData} = require("element-china-area-data/dist/app");
import request from "@/http/request";

export default {
  name: "AddAddress",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    addressData: {
      type: Object,
    }
  },
  emits: {
    closeDialog: {
    },
  },
  watch: {
    dialogFormVisible: function(newVal){
      this.parentDialogFormVisible = newVal;
    },
    addressData: function (newVal) {
      if (newVal.id) {
        this.fn = "修改";
      }
      else {
        this.fn = "添加";
      }
      this.addressForm.id = newVal.id;
      this.addressForm.phoneNum = newVal.phoneNum;
      this.selectedOptions = newVal.addArray;
      this.addressForm.addressDetail = newVal.addressDetail;
    },
  },
  data() {
    return {
      fn: '',
      parentDialogFormVisible: this.dialogFormVisible,
      locOptions: regionData,
      selectedOptions: [],
      addressForm: {
        id: '',
        phoneNum: '',
        province: '',
        city: '',
        area: '',
        addressDetail: '',
      }
    };
  },
  methods: {
    handleChange() {
      for (let i = 0; i < this.selectedOptions.length; i++) {
        if (i === 0) {
          this.addressForm.province = this.selectedOptions[i];
        } else if (i === 1) {
          this.addressForm.city = this.selectedOptions[i];
        } else if (i === 2) {
          this.addressForm.area = this.selectedOptions[i];
        }
      }
    },
    resetForm: function() {
      this.selectedOptions = [];
      this.addressForm.addressDetail = '';
    },
    closeDialog: function() {
      this.resetForm();
      this.$emit('closeDialog');
    },
    addAddress: function () {
      request({
        url: "/user/addAddress",
        method: "post",
        data: {
          phoneNum: this.addressForm.phoneNum.toString(),
          province: this.addressForm.province,
          city: this.addressForm.city,
          area: this.addressForm.area,
          addressDetail: this.addressForm.addressDetail,
        },
      }).then((response) => {
        if (response.code === 200) {
          this.closeDialog();
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    editAddress() {
      request({
        url: "/user/updateAddress",
        method: "post",
        data: {
          addressId: this.addressForm.id,
          phoneNum: this.addressForm.phoneNum.toString(),
          province: this.addressForm.province,
          city: this.addressForm.city,
          area: this.addressForm.area,
          addressDetail: this.addressForm.addressDetail,
        },
      }).then((response) => {
        if (response.code === 200) {
          this.closeDialog();
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>